<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 项目</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInUp">
        <div class="row">
            <div class="col-sm-12">

                <div class="ibox">
                    <div class="ibox-title">
                        <h5>所有模板</h5>
                        <div class="ibox-tools">
                            <a href="javascript:editTemplate();" class="btn btn-primary btn-xs">创建新模板</a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-1">
                                <button type="button" id="loading-example-btn" class="btn btn-white btn-sm"><i class="fa fa-refresh"></i> 刷新</button>
                            </div>
                            <div class="col-md-11">
                                <div class="input-group">
                                    <input type="text" placeholder="请输入模板名称" class="input-sm form-control"> <span class="input-group-btn">
                                        <button id="" type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
                                </div>
                            </div>
                        </div>

                        <div class="project-list">

                            <table class="table table-hover">
                                <tbody>
                                    <tr>
                                        <td class="project-status">
                                            <span class="label label-default">停用</span>
                                        </td>
                                        <td class="project-title">
                                            <a href="project_detail.html">LIKE－一款能够让用户快速获得认同感的兴趣社交应用</a>
                                            <br/>
                                            <small>更新时间 2014.08.15</small>
                                        </td>
                                        <td class="project-completion">
                                            <small>当前版本： 1</small>
                                        </td>
                                        <td class="project-actions">
                                            <a href="template-manage.html#" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                            <a href="template-manage.html#" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 编辑 </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="project-status">
                                            <span class="label label-primary">启用</span>
                                        </td>
                                        <td class="project-title">
                                            <a href="project_detail.html">LIKE－一款能够让用户快速获得认同感的兴趣社交应用</a>
                                            <br/>
                                            <small>更新时间 2014.08.15</small>
                                        </td>
                                        <td class="project-completion">
                                            <small>当前版本： 13</small>
                                        </td>
                                        <td class="project-actions">
                                            <a href="template-manage.html#" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                            <a href="template-manage.html#" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 编辑 </a>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>


    <!-- 自定义js -->
    <script src="../js/content.js?v=1.0.0"></script>


    <script>
        $(document).ready(function(){

            $('#loading-example-btn').click(function () {
                btn = $(this);
                simpleLoad(btn, true);

                // Ajax example
//                $.ajax().always(function () {
//                    simpleLoad($(this), false)
//                });

                simpleLoad(btn, false);
            });

            $()
            
        });
        
        function editTemplate(id) {

            var html =
                '<div class="ibox-content" style="overflow: hidden;height: 100%;">'+
                '<form class="form-horizontal">' +
                '   <div class="form-group">' +
                '       <label class="col-sm-2 control-label">模板名称：</label>' +
                '       <div class="col-sm-10"><input type="text" class="form-control"></div>' +
                '   </div>' +
                '   <div class="hr-line-dashed"></div> '+
                '   <div class="form-group">' +
                '       <label class="col-sm-2 control-label">模板状态：</label>' +
                '       <div class="col-sm-10">' +
                '           <div class="radio-inline i-checks"><label><input type="radio" value="0" name="status"> <i></i> 停用</label></div>' +
                '           <div class="radio-inline i-checks"><label><input type="radio" value="1" name="status" checked=""> <i></i> 启用</label></div>' +
                '           <div class="checkbox-inline i-checks"><label><input type="checkbox" name="input"> <i></i> 允许输入</label></div>' +
                '       </div>' +
                '   </div>' +
                '   <div class="hr-line-dashed"></div> '+
                '   <div class="form-group">' +
                '       <label class="col-sm-2 control-label">模板内容：</label>' +
                '       <div class="col-sm-10">' +
                '           <textarea class="form-control" style="height: 400px;"></textarea>'+
                '       </div>' +
                '   </div>'+
                '</form>'+
                '</div>';
            layer.open({
                type: 1,
                area: ['900px','auto'],
                content: html,
                btn:['保存','取消'],
                success:function (layero, index) {
                    $(layero).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
                },
                yes: function(index, layero){
                    layer.close(index);
                }
            })

        }

        function simpleLoad(btn, state) {
            if (state) {
                btn.children().addClass('fa-spin');
                btn.contents().last().replaceWith(" 加载…");
            } else {
                setTimeout(function () {
                    btn.children().removeClass('fa-spin');
                    btn.contents().last().replaceWith(" 刷新");
                }, 2000);
            }
        }
    </script>

    </body>
</html>
